import React, { Component } from 'react'
import { Layout, Menu } from 'antd'
import { Popconfirm, message } from 'antd'
import { Route, Link } from 'react-router-dom'
import { JKYHomeWrapper } from './style'

import Index from '../Index'
import ArticleList from '../ArticleList'
import ArticlePublish from '../ArticlePublish'
import { removeToken } from '@/utils/storage'

import { LogoutOutlined, HomeOutlined, DiffOutlined, EditOutlined } from '@ant-design/icons'
import { getUserProfile } from '@/api/user.js'

const { Header, Content, Sider } = Layout

export default class JKHome extends Component {
  state = {
    profile: {},
  }

  async componentDidMount() {
    const res = await getUserProfile()
    this.setState({
      profile: res.data.data,
    })
  }

  handleLogout = () => {
    try {
      // 退出token
      //   localStorage.removeItem('geek_token')
      removeToken()
      // 跳转login
      this.props.history.push('/login')

      // 提示成功
      message.success('退出成功')
    } catch (err) {
      message.error('退出失败')
    }
  }

  render() {
    const text = '确定要离去吗?'
    return (
      <JKYHomeWrapper>
        <div className="home">
          <Layout>
            <Header className="header">
              <div className="logo" />
              <div className="profile">
              <span>{this.state.profile.name}</span> 
                <Popconfirm
                  placement="bottomRight"
                  onConfirm={this.handleLogout}
                  title={text}
                  okText="确定"
                  cancelText="取消"
                >
                  <span>
                    <LogoutOutlined></LogoutOutlined>
                    {'  '}退出
                  </span>
                </Popconfirm>
              </div>
            </Header>
            <Layout>
              <Sider width={200} className="site-layout-background">
                <Menu
                  theme="dark"
                  mode="inline"
                  defaultSelectedKeys={[this.props.location.pathname]}
                  selectedKeys={[this.props.location.pathname]}
                  style={{ height: '100%', borderRight: 0 }}
                >
                  <Menu.Item key="/home" icon={<HomeOutlined />}>
                    <Link to="/home">数据概览</Link>
                  </Menu.Item>
                  <Menu.Item key="/home/articlelist" icon={<DiffOutlined />}>
                    <Link to="/home/articlelist">内容管理</Link>
                  </Menu.Item>
                  <Menu.Item key="/home/articlepublish" icon={<EditOutlined />}>
                    <Link to="/home/articlepublish">发布文章</Link>
                  </Menu.Item>
                </Menu>
              </Sider>
              <Layout style={{ padding: '24px', overflow:'auto' }}>
                <Content
                  className="site-layout-background"
                  style={{
                    padding: 24,
                  }}
                >
                  {/* 二级路由 匹配 + 出口 */}
                  <Route exact path="/home" component={Index} />
                  <Route path="/home/articlelist" component={ArticleList} />
                  <Route path="/home/articlepublish/:id?" component={ArticlePublish} />
                </Content>
              </Layout>
            </Layout>
          </Layout>
        </div>
      </JKYHomeWrapper>
    )
  }
}
